<template>
	<view>
		<view>
			<view class="style1" @click="toAdress"><image src="../../static/z-picture/location.png" class="image1">
			<text v-if="addressData.length==0">请选择收货地址</text>
			<image src="../../static/z-picture/arrow.png" class="image2">
			<view>{{addressData.siteDetails}}{{addressData.siteNote}}</view>
				<text class="text9">{{addressData.siteName}}</text>
				<text class="text9">{{addressData.siteTelephone}}</text>
			</view>
			<view class="style1" @click="showMask"><image src="../../static/z-picture/clock.png" class="image1">
				<text>{{userChooseTime}}</text>
				<text v-if="isclick==0">立即购买 预计{{buyNowTime}}送达</text>
				<image src="../../static/z-picture/arrow.png" class="image2">	
			</view>
		<hTimeAlert 
			title="预约时间" 
			rangeStartTime="00:00:00"
			rangeEndTime="24:00:00"
			intervalTime="30"
			dayStartIntTime="60"
			rangeDay="3"
			defaultTime='2020-02-02 02:02:22'
			disabled="" 
			:isNow="isNow"
			:isRoundingTime="isRoundingTime"
			:isShow="isShow" 
			:maskHide="maskHide"
			:rangeType="rangeType"
			:closeBtn="closeBtn"
			@closeAlert="handelClose">
		</hTimeAlert>
		</view>
		<view class="">
			<view class="text1">填写想代购的{{good}}</view>
			<view v-if> <textarea  v-model="text1" :placeholder="text10" class="input1"></textarea></view>
			<text  class="lable" v-for="(item,index) in lableList" @click="change(item.lablename)">{{item.lablename}}</text>
		</view>
		<view class="all3">
			<view class="evan-radio">
				购买地址：
				<evan-radio-group @change="onGroupChange" v-model="color1"  
					v-for="item in addressList" :key="item.value">	
					<evan-radio :label="item.value">{{item.label}}</evan-radio>
				</evan-radio-group>
			</view>
			<view class="text4" @click="chooseLocation" v-if="key1==1">{{addressName}}<image src="../../static/z-picture/arrow.png" class="image3"></view>
			<view class="text3">预估商品费 
			<input class="style4" placeholder="请输入预估价格" v-model="paymentPrice"/> 
			</view>
			
			<view class="text2">由骑手垫付，骑手购买后线上支付</view>
		</view>
		<view class="fixed-bottom">
			<view class="text7">跑腿费<text class="text12">￥{{sendprice}}</text></view> 
			<view @click="createOrder" class="text6">提交订单</view>
			<view @click="showPop" class="text5">明细 <image src="../../static/z-picture/arraytop.png" class="image4"></image></view>
			<view class="text7" >{{k_Num}}</view>	
		</view>
		<minpopup :show="show_pop" @close="close">
			<view class="min1">跑腿费明细</view>
			<view class="min2">基础配送费<text class="min3">￥{{basicSendPrice}}</text></view>
			<view class="min2" v-if="distancePrice!=0">距离附加费<text class="min3">￥{{distancePrice}}</text></view>
			<view class="min2" v-if="specialTimePrice!=0">特殊时段费<text class="min3">￥{{specialTimePrice}}</text></view>
		</minpopup>
	</view>	    	
</template>

<script>
	import hTimeAlert from "@/components/h-time-alert/h-time-alert.vue";
	import {mydateformat} from "../../unitl/api.js";
	import minpopup from "@/components/min-popup/min-popup.vue";
	export default {
		components:{
			hTimeAlert,minpopup
		},
		data() {
			return {
				show_pop:false,/* minpopup插件的属性 */
				buyNowTime: mydateformat(),
				userid:1,
				id:1,
				color1:1,
				key1:1,
				isShowPriceTxet:0,
				paymentPrice:'',
				/* 配送费 */
				sendprice:11,
				/* 标签集合 */
				lableList:[],
				text1:'',
				good:'',
				text10:'',
				isclick:0,
				isShow: false,
				isNow:true,
				isRoundingTime:true,
				maskHide: false,
				closeBtn: true,
				rangeType: false,
				addressData:[],
				addressName: "请选择代购地址",
				address: '',
				longitude:'',
				latitude:'',
				userChooseTime:'',
				addressList:[{
					label:'指定地址',
					value: 1		
				},{
					label:'就近购买',
					value: 2
				}],
				buyAdress:{
					longitude:'',
					latitude:''
				},
				distance:'',  /* 骑行距离 m*/
				duration:'', /* 骑行时间 s*/
				k_Num:"3公里内",	
				basicSendPrice:11,/* 基础配送费，3公里以内（包括） */
				distancePrice:0,/* 距离附加费 */
				weightPrice:'',/*  重量*/
				specialTimePrice:0,/* 特殊时段0-7 +2  22-24  +1 */
				difficultPrice:'',/*,  雨雪天气，困难路段*/
				sendTime:''/*  */
			}
		},
		methods: {
			onGroupChange(e) {
				//这里可以获取选中框的值
				this.key1=e
				console.log(this.key1)
			},
			toAdress(){
				uni.navigateTo({
					url:"../address/address?userid="+this.userid
				})
			},
			change(lable){
				this.text1+=lable+" ";
			},
			//开启时间弹窗，选择时间
			showMask() {
			    this.isShow = true;
			},
			//获取用户选择的时间
			handelClose(data) {
			            this.isShow = false;
						if(data._date==''||data._date==null){
							//这只是一个判断
						}else{
							this.userChooseTime=data._date
							this.isclick=1
						}
			},
			//地图选择地址
			chooseLocation() {
				uni.chooseLocation({
					success: data => {	
						this.addressName = data.name;
						this.address = data.name;
						this.buyAdress.longitude=data.longitude;
						this.buyAdress.latitude=data.latitude;
					}
				});
			},
			//底部明细插件开启
			showPop(){
			    this.show_pop = true
			},
			//底部明细插件关闭
			close(){
			    this.show_pop = false
			},
			//提交订单
		 	async createOrder(){
			/* const res=await this.$myRequest({
					url:,
					method:'POST',
					data:{
						
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					}
				}) */
			} 
		},
		async onLoad(option) {
			this.id=option.id
			this.good=option.showName
			this.text10=option.placeholderName
			const res=await this.$myRequest({
				url:"/lable/list?id="+option.id
			})
			this.lableList=res.data.lablelist
		},
		 onShow() {
			 //console.log('触发onshow')
			if(this.latitude!=''&& this.longitude!='' && this.buyAdress.latitude!='' && this.buyAdress.longitude!=''){
				uni.request({
				url:"https://restapi.amap.com/v4/direction/bicycling?origin="+this.longitude+","+this.latitude+"&destination="+this.buyAdress.longitude+","+this.buyAdress.latitude+"&key=1f5cfb770d01a1a0d8289169188de6b3",
				success: res =>{
					//console.log(res)
					this.distance=res.data.data.paths[0].distance
					this.duration=res.data.data.paths[0].duration
					//console.log(this.distance)
					//console.log(this.duration)
					if(this.distance<3000){
						this.sendprice=11;
					}else{
						uni.request({
							url:this.baseurl+"/lable/getprice?distance="+this.distance+"&duration="+this.duration,
							success: res1 =>{
								this.sendprice=res1.data.price;
								this.k_Num=res1.data.k_Num;
								this.sendTime=res1.data.sendTime;
								this.buyNowTime=res1.data.estimateTime;
								this.basicSendPrice=res1.data.basicSendPrice;
								this.distancePrice=res1.data.distancePrice;
								this.specialTimePrice=res1.data.specialTimePrice;
								//console.log(res1)
							}
						})
					}
				}
			})
			}
		}
	}
</script>

<style scoped>
	.image1 {
	 	 width: 40rpx;
	 	 height: 40rpx;	   
		  float: left;
		  margin-right: 40rpx;
	  }
	  .image2 {
	 	 width: 40rpx;
	 	 height: 40rpx;	
		  float: right;
		  margin: 10rpx;
		  
	  }
	  .image3{
		  width: 40rpx;
		  height: 40rpx;	
		   float: right;
		   margin-right: 62rpx;
		   margin-top: 10rpx;
		   
	  }
	  .image4{
		  width: 40rpx;
		  height: 40rpx;
		  margin-left: 10rpx;
		  margin-top: 2rpx;
	  }
	 .style1{
		 margin: 50rpx;
		  font-size: 33rpx;
		  font-weight: bold;   
		  align-items: center;
	  }
	  .text1{
		  font-size: 38rpx;
		  font-weight: bold; 
		  margin-left: 55rpx;
	  }
	  .input1{
		  margin-left: 27px;
		  margin-right: 27px;
		  margin-top: 20rpx;
		  
	  }
	  .evan-radio{
	      display: inline-flex;
		  margin-left: 10px;
		  margin-right: 10px;
	  }
	  .text2{
		  font-size: 30rpx;
		  color:#FF3030;
		  margin-left: 20rpx;
	  }
	  .text3{
		  font-size: 36rpx;
		  margin-left: 20rpx;
		  margin-top: 20rpx;
	  }
	  .text4{
		  font-size: 32rpx;
		  margin-left: 230rpx;
		  margin-top: 20rpx;
		  color: #AFAFAF;
	  }
	  .text5{
		  float: right;
		  margin-right: 120rpx;
		  font-size: 18px;
	  }
	  .text6{
		  float: right;
		  margin-right: 50rpx;
		  font-size: 28px;
		  font-weight: bold;
		  color: #FFFF00;

	  }
	  .text7{
		  margin: 20rpx;
		
	  }
	  .text9{
		  margin-left: 80rpx;
		  font-size: 14px;
		  color: #AFAFAF;
	  }
	  .position-sticky {
	      position: -webkit-sticky!important;
	      position: sticky!important;
	  }
	      
	  .fixed-bottom {
	      position: fixed;
	      right: 0;
	      bottom: calc( var(--window-bottom) + 0px);
	      left: 0;
	      z-index: 1030;
		  height: 180rpx;
		  background-color: #1CBBB4;
	  }
	  .style2{
		  float: left;
	  }
	  .all2{
		  margin: 10rpx;
		  background-color: #F0F0F0;
	  }
	  .all1{
		  line-height: 80rpx;
		  margin: 10rpx;
		  background-color:#FFDE17 ;
	  }
	  .all3{
	  		 margin-top: 50rpx;
			 margin-left: 50rpx;
	  		  
	  }
	 .lable{
		 margin: 10rpx;
		 border-radius: 20rpx;
		 background-color: #F0F0F0;
		 padding: 10rpx;
		 font-size: 14px;
	 }
	 .text8{
		 margin: 50rpx;
		font-weight: bold;
		align-items: center;
		
	 }
	 .style4{
		float: right;
	 }
	 .min1{
		 margin-left: 260rpx;
		
	 }
	 .min2{
		margin-left: 220rpx;
		 margin-top: 50rpx;
		 margin-bottom: 50rpx;
	 }
	 .min3{
		 font-weight: bold;
	 }
	 .text12{
		 font-weight: bold;
		 color: #FF4500;
	 }
	 
	  
		 	 
</style>
